<template>
    <section>
        <h2>已经完成<span>{{ comLen }}</span></h2>
        <ul>
            <li v-for="(item, index) in todos" :key="item.id" v-show="item.checked">
                <input type="checkbox" v-model="item.checked" />
                <p> {{ item.content }}</p>
                <a href="javascript:;" @click="emit('delItem', index)">-</a>
            </li>
        </ul>
    </section>
</template>
<script setup>
import { computed } from 'vue'


let { todos } = defineProps({
    todos: Array
})
let comLen = computed(() => todos.filter(item => item.checked).length)
// 删除功能
let emit = defineEmits(['delItem'])
</script>
<script>
export default {
    name: "complateCom"
}
</script>
<style scoped>
ul {
    padding: 0;
    list-style: none;
}
</style>
  ​